---
type: tutorial
title: Créer une page répertoriant les étiquettes
description: |-
  Tutoriel : Créez votre premier blog Astro —
  Utilisez tout ce que vous avez appris jusqu'à présent pour créer une page répertoriant les étiquettes.
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Maintenant que vous avez des pages individuelles pour chaque étiquette, créons des liens vers elles.

<PreCheck>
  - Ajoutez une nouvelle page en utilisant le modèle de routage `/pages/dossier/index.astro`
  - Affichez une liste de toutes vos étiquettes uniques, en créant des liens vers chaque page d'étiquette
  - Mettez à jour votre site avec des liens de navigation vers cette nouvelle page d'étiquettes
</PreCheck>

## Utilisez le modèle de routage `/pages/dossier/index.astro`

Pour ajouter une page répertoire d'étiquettes à votre site web, vous pourriez créer un nouveau fichier à `src/pages/tags.astro`.

Mais, comme vous avez déjà le dossier `/tags/`, vous pouvez profiter d'un autre modèle de routage dans Astro et regrouper tous vos fichiers liés aux étiquettes ensemble.

<Box icon="puzzle-piece">

## Essayez par vous-même - Créer une page répertoriant les étiquettes

<Steps>
1. Créez un nouveau fichier `index.astro` dans le dossier `src/pages/tags/`.

2. Accédez à `http://localhost:4321/tags` et vérifiez que votre site contient désormais une page à cette URL. Elle sera vide, mais elle existera.

3. Créez une page minimale à `src/pages/tags/index.astro` qui utilise votre mise en page. Vous avez déjà fait cela auparavant !

    <details>
      <summary>Cliquez pour voir les étapes</summary>
      <Steps>
      1. Créez un nouveau composant de page dans `src/pages/tags/`.

          <details>
          <summary>Afficher le nom du fichier</summary>
          ```
          index.astro
          ```
          </details>

      2. Importez et utilisez votre `<BaseLayout>`.

          <details>
          <summary>Afficher le code</summary>
          ```astro title=" src/pages/tags/index.astro"
          ---
          import BaseLayout from '../../layouts/BaseLayout.astro';
          ---
          <BaseLayout></BaseLayout>
          ```
          </details>

      3. Définissez un titre de page et transmettez-le à votre mise en page en tant qu'attribut de composant.

          <details>
          <summary>Afficher le code</summary>
          ```astro title="src/pages/tags/index.astro" ins={3} "pageTitle"
          ---
          import BaseLayout from '../../layouts/BaseLayout.astro';
          const pageTitle = "Répertoire des étiquettes";
          ---
          <BaseLayout pageTitle={pageTitle}></BaseLayout>
          ```
          </details>
      </Steps>
    </details>

4. Vérifiez à nouveau votre aperçu dans le navigateur, et vous devriez avoir une page formatée, prête à ajouter du contenu !
</Steps>
</Box>

## Créez un tableau d'étiquettes

Vous avez déjà affiché des éléments dans une liste à partir d'un tableau en utilisant `map()`. À quoi cela ressemblerait-il de définir un tableau de toutes vos étiquettes, puis de les afficher dans une liste sur cette page ?

<details>
    <summary>Voir le code</summary>

    ```astro title="src/pages/tags/index.astro"
    ---
    import BaseLayout from '../../layouts/BaseLayout.astro';
    const tags = ['astro', 'blogging', 'apprentissage en public', 'succès', 'échecs', 'communauté']
    const pageTitle = "Index des balises";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <ul>
        {tags.map((tag) => <li>{tag}</li>)}
      </ul>
    </BaseLayout>
    ```
</details>

Vous pourriez le faire, mais alors vous devriez revenir sur ce fichier et mettre à jour votre tableau à chaque fois que vous utilisez une nouvelle étiquette dans un futur article de blog.

Heureusement, vous savez déjà comment récupérer les données de tous vos fichiers Markdown en une seule ligne de code, puis renvoyer une liste de toutes vos étiquettes.

<Steps>
1. Dans `src/pages/tags/index.astro`, ajoutez la ligne de code au script frontmatter qui donnera à votre page accès aux données de chaque fichier de blog `.md`.

    <details>
    <summary>Voir le code</summary>
    ```astro title = "src/pages/tags/index.astro" ins={3}
    ---
    import BaseLayout from '../../layouts/BaseLayout.astro';
    const allPosts = await Astro.glob('../posts/*.md');
    const pageTitle = "Répertoire des étiquettes";
    ---
    ```
    </details>

2. Ensuite, ajoutez la ligne de code JavaScript suivante à votre composant de page. Il s'agit du même code que nous avons utilisé dans `src/pages/tags/[tag].astro` pour renvoyer une liste d'étiquettes uniques.

    ```astro title = "src/pages/tags/index.astro" ins={4}
    ---
    import BaseLayout from '../../layouts/BaseLayout.astro';
    const allPosts = await Astro.glob('../posts/*.md');
    const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
    const pageTitle = "Répertoire des étiquettes";
    ---
    
    ```
</Steps>

## Créez votre liste de balises

Au lieu de créer des éléments dans une liste non ordonnée cette fois-ci, créez un `<p>` pour chaque élément, à l'intérieur d'un `<div>`. Le modèle devrait vous sembler familier !

<Steps>
1. Ajoutez le code suivant à votre modèle de composant :

    ```astro title="src/pages/tags/index.astro" ins={2}
      <BaseLayout pageTitle={pageTitle}>
        <div>{tags.map((tag) => <p>{tag}</p>)}</div>
      </BaseLayout>
    ```
    Dans votre aperçu dans le navigateur, vérifiez que vous pouvez voir vos étiquettes répertoriées.

2. Pour que chaque étiquette renvoie à sa propre page, ajoutez le lien `<a>` suivant à chaque étiquette unique :

    ```astro title="src/pages/tags/index.astro" '/tags/${tag}'
    <BaseLayout pageTitle={pageTitle}>
      <div>
        {tags.map((tag) => (
          <p><a href={`/tags/${tag}`}>{tag}</a></p>
        ))}
      </div>
    </BaseLayout>
    ```
</Steps>

## Ajoutez des styles à votre liste d'étiquettes

<Steps>
1. Ajoutez les classes CSS suivantes pour styliser à la fois votre `<div>` et chaque `<p>` qui sera généré. Remarque : Astro utilise la syntaxe HTML pour ajouter des noms de classe !

    ```astro title="src/pages/tags/index.astro" 'class="tags"' 'class="tag"'
    <BaseLayout pageTitle={pageTitle}>
    <div class="tags">
      {tags.map((tag) => (
        <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
      ))}
    </div>
    </BaseLayout>
    ```

2. Définissez ces nouvelles classes CSS en ajoutant la balise `<style>` suivante à cette page :

    ```astro title="src/pages/tags/index.astro"
    <style>
      a {
        color: #00539F;
      }

      .tags {
        display: flex; 
        flex-wrap: wrap; 
      }

      .tag {
        margin: 0.25em;
        border: dotted 1px #a1a1a1;
        border-radius: .5em;
        padding: .5em 1em;
        font-size: 1.15em;
        background-color: #F8FCFD;
      }
    </style>
    ```

3. Vérifiez l'aperçu dans le navigateur à `http://localhost:4321/tags` pour vérifier que vous avez de nouveaux styles et que chacune des balises de la page a un lien fonctionnel vers sa propre page de balise individuelle.
</Steps>
  
### Validation du code

Voici à quoi devrait ressembler votre nouvelle page :

```astro title="src/pages/tags/index.astro"
--- 
import BaseLayout from '../../layouts/BaseLayout.astro';
const allPosts = await Astro.glob('../posts/*.md');
const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
const pageTitle = "Index des balises";
---
<BaseLayout pageTitle={pageTitle}>
  <div class="tags">
    {tags.map((tag) => (
      <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
    ))}
  </div>
</BaseLayout>
<style>
  a {
    color: #00539F;
  }

  .tags {
    display: flex; 
    flex-wrap: wrap; 
  }

  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: .5em;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: #F8FCFD;
  }
</style>
```

## Ajoutez cette page à votre navigation

Actuellement, vous pouvez naviguer vers `http://localhost:4321/tags` et voir cette page. À partir de cette page, vous pouvez cliquer sur des liens vers vos pages d'étiquettes individuelles.

Cependant, vous devez toujours rendre ces pages accessibles depuis d'autres pages de votre site web.

<Steps>
1. Dans votre composant `Navigation.astro`, incluez un lien vers cette nouvelle page répertoriant vos étiquettes.

    <details>
    <summary>Affichez-moi le code</summary>
    ```astro title="src/components/Navigation.astro" ins={4}
    <a href="/">Accueil</a>
    <a href="/a-propos/">À propos</a>
    <a href="/blog/">Blog</a>
    <a href="/tags/">Étiquettes</a>
    ```
    </details>
</Steps>
  
<Box icon="puzzle-piece">

## Défi : Inclure les étiquettes dans la mise en page de vos articles de blog

Vous avez maintenant écrit tout le code dont vous avez besoin pour afficher également une liste d'étiquettes sur chaque article de blog, et les lier à leurs pages d'étiquettes. Vous avez du travail existant que vous pouvez réutiliser !

Suivez les étapes ci-dessous, puis vérifiez votre travail en le comparant à l'[exemple de code final](#validation-du-code--markdownpostlayout).
<Steps>
  
1. Copiez le `<div class="tags">...</div>` et le `<style>...</style>` depuis `src/pages/tags/index.astro` et réutilisez-les à l'intérieur de `MarkdownPostLayout.astro` :

    ```astro title="src/layouts/MarkdownPostLayout.astro" ins={13-17, 21-40}
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    --- 
    <BaseLayout pageTitle={frontmatter.title}>
      <p><em>{frontmatter.description}</em></p>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
  
      <p>Rédigé par : {frontmatter.author}</p>
  
      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} /> 
  
      <div class="tags">
        {tags.map((tag) => (
          <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
        ))}
      </div>
  
      <slot />
    </BaseLayout>
    <style>
      a {
        color: #00539F;
      }
  
      .tags {
        display: flex; 
        flex-wrap: wrap; 
      }
  
      .tag {
        margin: 0.25em;
        border: dotted 1px #a1a1a1;
        border-radius: .5em;
        padding: .5em 1em;
        font-size: 1.15em;
        background-color: #F8FCFD;
      }
    </style>
    ```

</Steps>
  
Avant que ce code ne fonctionne, vous devez apporter **une petite modification** au code que vous avez collé dans `MarkdownPostLayout.astro`. Pouvez-vous deviner ce que c'est ?

<details>
<summary>Donnez-moi un indice</summary>

Comment les autres propriétés (par exemple, le titre, l'auteur, etc.) sont-elles écrites dans votre modèle de mise en page ? Comment votre mise en page reçoit-elle les propriétés d'un article de blog individuel ?
</details>

<details>
<summary>Donnez-moi un autre indice !</summary>

Pour utiliser les propriétés (valeurs passées) d'un article de blog en Markdown dans votre mise en page, comme les balises, vous devez préfixer la valeur avec un certain mot.

<details>
<summary>Affichez-moi le code !</summary>

```astro title="src/layouts/MarkdownPostLayout.astro" "frontmatter"
    <div class="tags">
      {frontmatter.tags.map((tag) => (
        <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
      ))}
    </div>
```
</details>
</details>
</Box>

### Validation du code : MarkdownPostLayout

Pour vérifier votre travail, ou si vous voulez simplement un code complet et correct à copier dans `MarkdownPostLayout.astro`, voici à quoi devrait ressembler votre composant Astro :

```astro title="src/layouts/MarkdownPostLayout.astro"
---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
--- 
<BaseLayout pageTitle={frontmatter.title}>
  <p><em>{frontmatter.description}</em></p>
  <p>{frontmatter.pubDate.toString().slice(0,10)}</p>

  <p>Rédigé par : {frontmatter.author}</p>

  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} /> 

  <div class="tags">
    {frontmatter.tags.map((tag) => (
      <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
    ))}
  </div>

  <slot />
</BaseLayout>
<style>
  a {
    color: #00539F;
  }

  .tags {
    display: flex; 
    flex-wrap: wrap; 
  }

  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: .5em;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: #F8FCFD;
  }
</style>
```
  
  

<Box icon="question-mark">

### Testez vos connaissances

Associez chaque chemin de fichier à un deuxième chemin de fichier qui créera une page à la même route.

1. `src/pages/categories.astro`

    <MultipleChoice>
      <Option>`src/pages/posts/post.astro`</Option>
      <Option>`src/pages/posts/index.astro`</Option>
      <Option>`src/components/shoes/Shoe.astro`</Option>
      <Option isCorrect>`src/pages/categories/index.astro`</Option>
    </MultipleChoice>

2. `src/pages/posts.astro`

    <MultipleChoice>
      <Option>`src/pages/products/shoes.astro`</Option>
      <Option>`src/pages/posts/post.astro`</Option>
      <Option isCorrect>`src/pages/posts/index.astro`</Option>
      <Option>`src/pages/categories/index.astro`</Option>
    </MultipleChoice>

3. `src/pages/products/shoes/index.astro`

    <MultipleChoice>
      <Option isCorrect>`src/pages/products/shoes.astro`</Option>
      <Option>`src/pages/posts/post.astro`</Option>
      <Option>`src/pages/posts/index.astro`</Option>
      <Option>`src/components/shoes/Shoe.astro`</Option>
    </MultipleChoice>

</Box>

<Box icon="check-list">

## Liste de contrôle

<Checklist>
- [ ] Je peux utiliser la fonction de routage `/pages/dossier/index.astro` d'Astro.
</Checklist>
</Box>

### Ressources

- [Routage statique dans Astro](/fr/guides/routing/#routes-statiques)
